<template>
  <div id="home" class="animated animate__backInUp">
    <el-container>
      <el-aside>
        <div class="logoImg">
          <img src="../../assets/maer.jpg" alt="" />
        </div>
        <el-col>
          <el-menu
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-submenu index="0-1">
              <template slot="title">
                <i class="el-icon-tickets"></i>
                <span>成员管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1" @click="addUser">新增成员</el-menu-item>
                <el-menu-item index="1-2" @click="findUser">查询成员</el-menu-item>
              </el-menu-item-group>
          
            </el-submenu>
            <el-menu-item>
              <i class="el-icon-menu"></i>
              <span slot="title">菜单管理</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">用户管理</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-aside>
      <el-container>
        <el-header>
          <h2 class="Header-Title">地址管理系统</h2>
          <div class="user">
            <img src="../../assets/meinv2.jpg" alt="" />
            <div class="userinfo">
              <ul>
                <li><span class="userName">{{username}}</span></li>
                <li class="UserCaretBottom">
                  <Dropdown>
                    <i
                      class="
                        arrow-down-b
                        el-icon-caret-bottom
                        User-Caret-Bottom
                      "
                    ></i>
                    <Dropdown-menu slot="list">
                      <Dropdown-item name="userBtn">我的</Dropdown-item>
                      <Dropdown-item @click.native="LogOut">退出</Dropdown-item>
                    </Dropdown-menu>
                  </Dropdown>
                </li>
              </ul>
            </div>
          </div>
        </el-header>
        <el-main>
          <StudentInfo v-if="$store.state.isShowFindUser"/>
          <UserAdd v-if="$store.state.isShowAddUser"/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import Hamburger from "@/components/Hamburger";
import home from "./js/home";
import StudentInfo from "./user/UserHome.vue";
import UserAdd from './userPage/UserAdd.vue'
export default {
  components: {
    home,
    StudentInfo,
    Hamburger,
    UserAdd
  },
  data() {
    return {
      userData:[],
      showModel:{
        isShowAddUser:this.$store.state.isShowAddUser,
        isShowFindUser:this.$store.state.isShowFindUser,
      },
          username:localStorage.getItem("username"),
      
    };
  },
  mounted() {

  },
  methods: {
    goHome() {},
    addUser(){
         this.$store.state.isShowFindUser=false;
         this.$store.state.isShowAddUser=true;
    },
    findUser(){
       this.$store.state.isShowFindUser=true;
      this.$store.state.isShowAddUser=false;
    },
    handleOpen(key, keyPath) {
      console.log(key);
      console.log(keyPath);

},
    handleClose(key, keyPath) {
      console.log(key);
    },
    btnMyInfo(even) {
      console.dir(even);
    },
    userBtn() {},
    LogOut(even) {
      localStorage.removeItem("token");
       localStorage.removeItem("username");
        localStorage.removeItem("uid");
      this.$router.push({ path: "/" });
    },
  },
};
</script>
<style>
@import url("./css/home.css");
#three {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
}
</style>